<template>
  <!-- 个人中心 -->

  <div class="box">
    <heads ref="heads"></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="29"></ceList>
      <div class="bang-club">
        <!-- 等级规则 -->
        <div class="flex" style="justify-content: flex-end;">
          <div
            class="rule pointer"
            @click="showRule = true"
            v-show="!showDetailsBox"
          >
            等级规则
          </div>
        </div>
        <!-- 轮播 -->
        <div v-show="!showDetailsBox">
          <div class="swiper-container">
            <div class="button-prev flex al-center ju-center pointer">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="button-next flex al-center ju-center pointer">
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, i) in vipData"
                :key="i"
                :style="{ hight: hight ? hight : '150px' }"
              >
                <!-- content -->
                <!-- <div> -->
                <div class="item-level flex">
                  <div class="img flex">
                    <img :src="levelList[i].img" mode />
                    <span :style="{ color: colors[i].wordColor }">{{
                      item.title
                    }}</span>
                  </div>

                  <div class="cur-level flex">
                    <!-- <div class="cur-level flex"> -->
                    <span
                      class="cur-title"
                      v-if="
                        vipInfo.integral * 1 < item.inteOver * 1 &&
                          vipInfo.integral * 1 > item.inteStart * 1
                      "
                      >当前等级</span
                    >
                    <span
                      class="cur-title"
                      v-else-if="vipInfo.integral * 1 > item.inteOver * 1"
                      >已获得</span
                    >
                    <span class="cur-title" v-else>待升级</span>
                    <div
                      class="right-box"
                      :style="{
                        '--bstate': colors[i].lineColor,
                        '--state': colors[i].bgColor,
                        backgroundColor: colors[i].bgColor,
                        borderColor: colors[i].lineColor
                      }"
                    >
                      <span
                        :style="{
                          color: colors[i].wordColor,
                          left:
                            titleReplace(item.title).length > 2 ? '2px' : '12px'
                        }"
                        >{{ titleReplace(item.title) }}</span
                      >
                    </div>
                  </div>
                </div>
                <div class="level-progress">
                  <el-progress
                    :show-text="false"
                    :stroke-width="12"
                    :color="colors[i].lineColor"
                    :percentage="psg[i]"
                  ></el-progress>
                  <div class="level-num flex">
                    <span
                      v-if="vipInfo.integral * 1 < item.inteOver * 1"
                      :style="{ color: colors[i].wordColor }"
                      >{{ vipInfo.integral }}/{{ item.inteOver }}</span
                    >
                    <span v-else :style="{ color: colors[i].wordColor }"
                      >{{ item.inteOver }}/{{ item.inteOver }}</span
                    >
                    <span v-if="vipInfo.integral * 1 < item.inteOver * 1"
                      >距离升级还差{{
                        item.inteOver * 1 - vipInfo.integral * 1
                      }}帮帮豆</span
                    >
                    <span v-else>您已达成</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="swiper-container1" style="overflow:hidden;">
            <div class="swiper-wrapper" style="align-items:flex-start">
              <div
                class="swiper-slide swiper2"
                style="height: 50px;width:388px;"
                v-for="(item, i) in vipData"
                :key="i"
              >
                <div
                  class="swiper-item1 flex"
                  :class="{ itemStyle: i == index22 }"
                  :style="{
                    color: i !== index22 ? colors[i].wordColor : '#848484'
                  }"
                >
                  <div class="dot" :class="{ dotStyle: i !== index22 }">
                    <div
                      class="small-dot"
                      :class="{ smallDotStyle: i !== index22 }"
                      :style="{
                        backgroundColor:
                          i !== index22 ? colors[i].wordColor : '#E0E0E0'
                      }"
                    ></div>
                  </div>
                  <span class="swiper-title">{{ item.title }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户会员数据 -->
        <div class="userInfo">
          <div class="cur-left">
            <div class="cur-title">当前等级</div>
            <div class="cur-lev">{{ vipInfo.memberLevelTitle }}</div>
          </div>
          <div class="cur-right">
            <div class="cur-title">帮帮豆余额</div>
            <div class="cur-lev">{{ vipInfo.integral }}</div>
          </div>
          <div
            class="mingxi pointer"
            v-if="!showDetailsBox"
            @click="showDetailsBox = !showDetailsBox"
          >
            明细
          </div>
          <!-- <div class="mingxi pointer" v-else @click="showDetailsBox = !showDetailsBox">返回</div> -->
        </div>
        <!-- 明细弹窗 -->
        <div class="details" v-show="showDetailsBox">
          <div class="det-close pointer" @click="showDetailsBox = false">×</div>
          <div class="det-title">帮帮豆明细</div>
          <div class="choose-date">
            <el-select
              v-model="value1"
              @change="yearClick"
              placeholder="请选择"
            >
              <el-option
                v-for="item in yearsList"
                :key="item"
                :label="item + '年'"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="value2"
              @change="monthClick"
              placeholder="请选择"
            >
              <el-option
                v-for="item in monthList"
                :key="item"
                :label="item + '月'"
                :value="item"
              ></el-option>
            </el-select>
          </div>

          <div class="det-list" v-if="value2 == '选择月'">
            <div
              class="det-month"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div class="list-title flex al-center">
                <div class="list-left">{{ dateList[index] }}</div>
                <div class="list-left">合计 {{ total[index] }}</div>
              </div>
              <div class="list-content" v-for="(ite, i) in item" :key="i">
                <div
                  class="flex ju-bew al-center"
                  @click="openDet(dateList[index], ite.number, i)"
                >
                  <div class="content-left">{{ ite.title }}</div>
                  <div class="content-right">
                    <i
                      v-if="showDet == i && showDetMonth == dateList[index]"
                      class="el-icon-arrow-up"
                    ></i>
                    <i class="el-icon-arrow-down" v-else></i>
                    +{{ ite.integral }}
                  </div>
                </div>
                <!-- 明细中的明细 -->
                <div
                  class="det-det"
                  v-show="showDet == i && showDetMonth == dateList[index]"
                >
                  <!-- <div class="det-det"> -->
                  <!-- <vue-scroll :ops="ops" style="height:250px;width:670px"> -->
                  <div class="item-container">
                    <div>
                      <div
                        class="dd-list flex al-center ju-bew"
                        v-for="(items, idx) in dayDetailsList"
                        :key="idx"
                      >
                        <div class="dd-left">
                          <div class="dd-title">{{ items.title }}</div>
                          <div class="dd-time">{{ items.date }}</div>
                        </div>
                        <div class="dd-right">{{ items.integral }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- </vue-scroll> -->
                </div>
              </div>
            </div>
          </div>
          <div class="flex det-list ju-center" v-if="dataList.length == 0">
            暂无数据
          </div>
          <div class="det-list" v-else>
            <div
              class="det-month"
              v-for="(item, index) in dataList"
              :key="index"
              v-show="value2.includes(dateList[index].substring(5))"
            >
              <div class="list-title flex al-center">
                <div class="list-left">{{ dateList[index] }}</div>
                <div class="list-left">合计 {{ total[index] }}</div>
              </div>
              <div class="list-content" v-for="(ite, i) in item" :key="i">
                <div
                  class="flex ju-bew al-center"
                  @click="openDet(dateList[index], ite.number, i)"
                >
                  <div class="content-left">{{ ite.title }}</div>
                  <div class="content-right">
                    <i
                      v-if="showDet == i && showDetMonth == dateList[index]"
                      class="el-icon-arrow-up"
                    ></i>
                    <i class="el-icon-arrow-down" v-else></i>
                    +{{ ite.integral }}
                  </div>
                </div>
                <!-- 明细中的明细 -->
                <div
                  class="det-det"
                  v-show="showDet == i && showDetMonth == dateList[index]"
                >
                  <!-- <happy-scroll color="red" size="20"> -->
                  <div class="item-container">
                    <div>
                      <div
                        class="dd-list flex al-center ju-bew"
                        v-for="(items, idx) in dayDetailsList"
                        :key="idx"
                      >
                        <div class="dd-left">
                          <div class="dd-title">{{ items.title }}</div>
                          <div class="dd-time">{{ items.date }}</div>
                        </div>
                        <div class="dd-right">{{ items.integral }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- </happy-scroll> -->
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 今天任务 -->
        <div v-show="!showDetailsBox">
          <div class="task-title">
            <div class="title-left">今日任务</div>
            <div class="title-right">
              完成以下任务，可获得{{ totalIntegral }}个帮帮豆
            </div>
          </div>

          <!-- 任务列表 -->
          <div class="task-list">
            <div
              class="task-li flex al-center"
              v-for="(item, index) in taskList"
              :key="index"
            >
              <div class="task-left al-center flex">
                <img
                  src="https://pic.bangbangtongcheng.com/static/gzh01.png"
                  mode
                />
                <div class="task-desc">
                  <div class="task-title">{{ item.title }}</div>
                  <div class="task-dot">+{{ item.integral }}帮帮豆</div>
                </div>
              </div>
              <div class="task-right al-center flex" v-if="taskName[index]">
                <div class="task-btn finish" v-if="item.CS == item.num">
                  {{ taskName[index].finish }}
                </div>
                <div
                  class="task-btn pointer"
                  v-else
                  @click="goFinish(item.number)"
                >
                  {{ taskName[index].noFinish }}
                </div>
                <div class="task-num">{{ item.CS }}/{{ item.num }}次</div>
              </div>
            </div>
          </div>

          <div class="more-task">— 更多任务，敬请期待 —</div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog title :visible.sync="showRule" :show-close="true" width="28%">
      <div class="flex ju-center al-center flex-c">
        <div class="rule-title">
          <span>—</span> 规则说明
          <span>—</span>
        </div>
        <vue-scroll style="height:450px;">
          <div
            style="height:450px;margin:0 5px;"
            v-if="vipData[0]"
            v-html="vipData[0].content"
          ></div>
        </vue-scroll>
      </div>
    </el-dialog>
    <div class="popupBox" v-if="showRepost" @click="showRepost = false">
      <div class="popupit" @click.stop>
        <div class="close-repost">
          <span @click="showRepost = false">×</span>
        </div>
        <div class="title" style="text-align: center;">微信扫码打开小程序</div>
        <img
          style="display:block; width: 150px;height:150px;margin:40px auto 10px;"
          src="../../assets/ma2.jpg"
          alt
        />
        <div class="btn" style="margin: 0 0 40px;"></div>
      </div>
    </div>
    <div class="popupBox" v-show="showQrcode" @click="showQrcode = false">
      <div class="popupit" @click.stop>
        <div class="close-repost">
          <span @click="showQrcode = false">×</span>
        </div>
        <div
          class="flex ju-center al-center flex-c"
          style="margin:54px 0 48px 0;"
        >
          <div id="qrCode" ref="qrCodeDiv"></div>

          <div
            style="font-weight: 500;margin:48px 0 0 0;color: #64B6A8;font-size: 24px;"
          >
            扫码关注微信公众号
          </div>
        </div>
      </div>
    </div>
    <!-- /弹窗 -->
    <floor></floor>
  </div>
</template>
<script>
import Swiper from "swiper";
// import VueQr from "vue-qr";
import QRCode from "qrcodejs2";
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    // VueQr,
    titlesearch
  },

  data() {
    return {
      showDet: null,
      showQrcode: false,
      showRule: false,
      showRepost: false,
      gzhUrl: "www.baidu.com",
      vipData: [],
      vipInfo: {},
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      taskList: [],
      totalIntegral: 0,
      taskName: [
        {
          noFinish: "去关注",
          finish: "已关注"
        },
        {
          noFinish: "去完善",
          finish: "已完善"
        },
        {
          noFinish: "去完成",
          finish: "已完成"
        },
        {
          noFinish: "去发布",
          finish: "已发布"
        },
        {
          noFinish: "去完成",
          finish: "已完成"
        },
        {
          noFinish: "去完成",
          finish: "已完成"
        },
        {
          noFinish: "去发布",
          finish: "已发布"
        }
      ],
      index1: -2,
      index11: 0,
      index22: -1,
      years: "",
      yearsList: [],
      detailsData: {},
      dataList: [],
      dateList: [],
      showDetMonth: "",
      showDetailsBox: false,
      total: [],
      psg: [],
      value1: "",
      value2: "",
      dayDetailsList: [],
      monthList: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12"
      ],
      index2: 0,
      levelList: [
        {
          name: "青铜",
          img: "https://pic.bangbangtongcheng.com/static/qt01.png"
        },
        {
          name: "白银",
          img: "https://pic.bangbangtongcheng.com/static/by01.png"
        },
        {
          name: "黄金",
          img: "https://pic.bangbangtongcheng.com/static/hj01.png"
        },
        {
          name: "铂金",
          img: "https://pic.bangbangtongcheng.com/static/bj01.png"
        },
        {
          name: "钻石",
          img: "https://pic.bangbangtongcheng.com/static/zs01.png"
        },
        {
          name: "钻石I",
          img: "https://pic.bangbangtongcheng.com/static/zsI01.png"
        },
        {
          name: "钻石II",
          img: "https://pic.bangbangtongcheng.com/static/zsII01.png"
        },
        {
          name: "钻石III",
          img: "https://pic.bangbangtongcheng.com/static/zsIII01.png"
        },
        {
          name: "王者",
          img: "https://pic.bangbangtongcheng.com/static/wz01.png"
        }
      ],
      hight: "",
      colors: [
        {
          bgColor: "#E9EFEF",
          wordColor: "#60807D",
          lineColor: "#B6C4C3",
          level: "青铜会员"
        },
        {
          bgColor: "#F7F7F7",
          wordColor: "#A3AAB0",
          lineColor: "#D2D9E0",
          level: "白银会员"
        },
        {
          bgColor: "#FFF8DE",
          wordColor: "#CEAB21",
          lineColor: "#D3CAB2",
          level: "黄金会员"
        },
        {
          bgColor: "#EDFAFF",
          wordColor: "#59B0E6",
          lineColor: "#BBD0DB",
          level: "铂金会员"
        },
        {
          bgColor: "#F2F5FF",
          wordColor: "#284EB6",
          lineColor: "#C1CBEF",
          level: "钻石会员"
        },
        {
          bgColor: "#FDF7FF",
          wordColor: "#A877C6",
          lineColor: "#DBC6E8",
          level: "钻石Ⅰ会员"
        },
        {
          bgColor: "#F8F2FF",
          wordColor: "#78439F",
          lineColor: "#958AC3",
          level: "钻石Ⅱ会员"
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#8D4581",
          lineColor: "#907B8C",
          level: "钻石Ⅲ会员"
        },
        {
          bgColor: "#F4F2F2",
          wordColor: "#502E30",
          lineColor: "#795D5E",
          level: "王者会员"
        }
      ],
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          background: "",
          opacity: 1,
          size: "4px",
          specifyBorderRadius: false,
          gutterOfEnds: null, //轨道距 x 和 y 轴两端的距离
          gutterOfSide: "0", //距离容器的距离
          keepShow: false, //是否即使 bar 不存在的情况下也保持显示
          border: "#F8F8F8" //边框
        },
        bar: {
          hoverStyle: true,
          size: "4px",
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#64B6A8" //颜色
        }
      }
    };
  },
  mounted() {
    console.log(this.index1);

    this.$nextTick(() => {});
    let url = this.gzhUrl;
    let qr = new QRCode(this.$refs.qrCodeDiv, {
      text: url,
      width: 200,
      height: 200
    });
  },
  created() {
    this.getVip();
    this.gzhUrl =
      "https://www.bangbangtongcheng.com/conven/login/Wxlogin.do?userId=" +
      this.userInfo.id;
    this.getTaskList();
    this.addDate();
    this.getTask();
  },
  computed: {
    // 去除字符
    titleReplace(item) {
      return function(item) {
        // console.log(item);
        let title = item.replace("会员", "");
        return title;
      };
    }
  },
  methods: {
    // 打开明细
    openDet(item, i, index) {
      this.dayDetailsList = [];
      if (this.showDet == index) {
        this.showDet = -1;
        return;
      }
      this.showDet = index;
      this.showDetMonth = item;
      this.getDayDetails(item, i);
    },

    // 转换时间
    addDate() {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month:
          nowDate.getMonth() + 1 < 10
            ? "0" + (nowDate.getMonth() + 1)
            : nowDate.getMonth() + 1,
        date: nowDate.getDate()
      };
      // this.systemTime = date.year + '-' + date.month + '-' + date.date
      this.value1 = date.year;
      this.value2 = date.month.toString();
      console.log(this.value2);
      // this.month = "date.month";
      for (let i = 0; i < 10; i++) {
        this.yearsList.push(this.value1 * 1 - i);
      }
      this.getDetails();
    },

    // 获取全年明细
    getDetails() {
      this.$getHttp("/mob/iteration/selectIntegralByYear", {
        userId: this.userInfo.id,
        year: this.value1
      }).then(res => {
        let data = {};
        this.dataList = [];
        res.recordList.forEach(el => {
          if (!Array.isArray(data[el.date])) {
            data[el.date] = [];
            data[el.date].push(el);
          } else {
            data[el.date].push(el);
          }
        });
        this.detailsData = data;
        let num = [];
        for (let i in this.detailsData) {
          let all = 0;
          this.dataList.push(this.detailsData[i]);
          this.dateList.push(i);
          this.detailsData[i].forEach(el => {
            all += el.integral;
            if (el.title.includes("关注/") || el.title.includes("收藏")) {
              el.title = "关注/收藏(楼盘、门店、用户、房源、看点)";
            }
          });
          num.push(all.toString());
        }
        this.total = num;
      });
    },
    // 获取某个月明细
    getDayDetails(mm, num) {
      let month = mm;
      let number = 0;
      // if (num == "关注公众号") {
      //   number = 1;
      // } else if (num == "完善信息" || num == "完善资料") {
      //   number = 2;
      // } else if (num == "转发房源" || num == "") {
      //   number = 3;
      // } else if (num == "发布房源") {
      //   number = 4;
      // } else if (num.includes("关注") || num.includes("收藏")) {
      //   number = 5;
      // }

      //
      this.$getHttp("/mob/iteration/selectIntegralByMonth", {
        userId: this.userInfo.id,
        month,
        number: num
      }).then(res => {
        this.dayDetailsList = res.recordList;
      });
    },
    // 获取任务数据
    getTask() {
      this.$postHttp("/mob/iteration/getClubInfo", {
        userId: this.userInfo.id
      }).then(res => {
        // this.vipData = res.userInfo;
        this.taskList = res.taskList;
        this.totalIntegral = 0;
        this.taskList.forEach(el => {
          this.totalIntegral += (el.num - el.CS) * el.integral;
        });
      });
    },
    // 获取用户会员数据
    getVip() {
      this.$getHttp("/mob/login/getUserInfoByPhone", {
        phone: this.userInfo.phone
      }).then(res => {
        this.vipInfo = res.userInfo;
        this.index1 = res.userInfo.memberLevel - 1;
        this.index2 = res.userInfo.memberLevel - 1;
      });
    },
    // 获取会员列表
    getTaskList() {
      this.$getHttp("/mob/iteration/getMemberConfigList", {
        userId: this.userInfo.id
      }).then(res => {
        this.vipData = res.data;
        // this.psg = this.vipData.map(el => {
        //   let pecg = ((this.vipInfo.integral * 1) / (el.inteOver* 1)) * 100;
        //   if (pecg > 100) {
        //     pecg = 100;
        //   }
        //   return pecg;
        // });
        res.data.forEach(el => {
          let pecg = ((this.userInfo.integral * 1) / (el.inteOver * 1)) * 100;
          if (pecg > 100) {
            pecg = 100;
            this.psg.push(pecg);
          } else {
            this.psg.push(pecg);
          }
        });
        setTimeout(() => {
          var swiper1 = new Swiper(".swiper-container", {
            // loop: true,
            autoplay: 3000,
            speed: 500,
            height: 380,
            initialSlide: this.index1,
            autoplayDisableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay // loop: true,
            centeredSlides: true,
            controller: {
              control: swiper2
            },
            slidesPerView: "auto",
            pagination: ".swiper-pagination",
            paginationClickable: true, //点击分页器是否会切换
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swipe
            navigation: {
              nextEl: ".button-next",
              prevEl: ".button-prev"
            }
          });

          let swiper2 = new Swiper(".swiper-container1", {
            // loop: true,
            autoplay: 3000,
            speed: 500,
            initialSlide: this.index1,
            controller: {
              control: swiper1
            },
            height: 50,
            autoplayDisableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay // loop: true,
            centeredSlides: true,
            slidesPerView: "auto",
            paginationClickable: true, //点击分页器是否会切换
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swipe

            onSlideChangeEnd: function(swiperHere) {
              console.log("===索引值：" + swiperHere.activeIndex);
            },
            on: {
              slideChange() {
                // vm.activeSlide = this.activeIndex
                console.log(this.activeIndex);
              }
            }
          });
          swiper1.controller.control = swiper2;
        }, 100);
      });
    },
    // 选择月份
    monthClick(val) {
      console.log(this.value2);
    },
    // 选择年份
    yearClick(val) {
      this.getDetails();
    },
    // 去完成按钮
    goFinish(num) {
      if (num == 1) {
        this.showQrcode = true;
      } else if (num == 2) {
        this.$router.push("./personal");
      } else if (num == 3) {
        this.showRepost = true;
      } else if (num == 4) {
        this.$refs.heads.toRouter(1);
        // console.log(this.$refs);
        // this.$router.push("./isshouse");
      } else if (num == 6) {
        this.$router.push("/index/friendsCircle");
      } else if (num == 7) {
        this.$router.push("/release/releaseCircleFriends");
      } else {
        this.$router.push("/");
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../node_modules/swiper/css/swiper.css";

.flex {
  display: flex;
}
.al-center {
  align-items: center;
}
.flex-c {
  flex-direction: column;
}
.ju-bew {
  justify-content: space-between;
}
.ju-center {
  justify-content: center;
}
.pointer {
  cursor: pointer;
}
.box {
  /deep/ .el-dialog__header {
    padding: 0 !important;
  }
}
.rule-title {
  margin: 0 0 26px 0;
  font-size: 22px;
  color: #333333;
  span {
    display: inline-block;
    margin: 0 11px;
    color: #64b6a8;
    font-weight: 600;
  }
}
.bang-club {
  position: relative;
  padding: 20px 0 0 0;
  flex: 4;
  border: 1px solid #e0e0e0;
  border-radius: 6px 6px 6px 6px;
  color: #333;

  .rule {
    border-radius: 19px 19px 19px 19px;
    padding: 5px 12px;
    margin: 0 50px 0 0;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid #64b6a8;
    color: #64b6a8;
  }
}

.button-prev,
.button-next {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  text-align: center;
  font-size: 22px;
  opacity: 0.49;
  color: #fff;
  background-color: #adadad;
  border-radius: 50%;
  transform: translate(-50%);
  z-index: 100;
}
.button-prev {
  left: 20px;
}
.button-next {
  right: 0px;
}
// .swiper-item {
//   width: 390px;
//   margin: 34px 54px;
//   padding: 24px 35px 35px 45px;
//   // background: #FFFFFF;
//   box-shadow: 0px 3px 10px 1px rgba(173, 173, 173, 0.38);
//   border-radius: 10px 10px 10px 10px;
// }
.right-box {
  display: flex;
  // justify-content: center;
  box-sizing: border-box;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  font-size: 17px;
  position: relative;
  width: 60px;
  // padding: 0 5px;
  height: 41px;
  border: 2px solid #333333;
  border-radius: 0 8px 8px 0;
  background-color: rgb(219, 52, 52);
  margin-left: 35px;
  span {
    left: 12px;
    position: absolute;
    z-index: 99;
    font-size: 17px !important;
    font-weight: 500;
  }
}
@-moz-document url-prefix() {
  .right-box::before {
    top: -2px !important;
    bottom: -4.5% !important;
  }
  .swiper-slide-prev .right-box::before {
    top: -1px !important;
    bottom: -1% !important;
  }
}

.right-box::before {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: -2px;
  border: 2px solid var(--bstate);
  border-right: 0;
  bottom: -6.2%;
  z-index: 1;
  right: 70px;
  left: -65px;
  background: var(--state);
  transform: translateX(50px) skewX(-15deg);
  border-radius: 8px 0 0 8px;
}
.swiper-slide-prev .right-box::before {
  // top: -1px !important;
  bottom: -7.4% !important;
}
.item-level {
  position: relative;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 16px 0;

  .img {
    align-items: flex-end;

    img {
      width: 55px;
      height: 55px;
      margin-right: 10px;
    }

    span {
      font-size: 16px;
      font-weight: 100;
    }
  }

  .rank-level {
    position: absolute;
    z-index: 99999999;
    right: 16px;
    top: 50%;
    transform: none;
    transform: translate(0, -50%);
    font-size: 28px;
    font-weight: 500;
    color: #a877c6;
  }

  .cur-level {
    // position: relative;

    .cur-title {
      font-size: 12px;
      font-weight: 400;
      color: #333333;
    }
  }
}

.level-progress {
  .progress-box {
    // display: flex;
    // align-items: center;
    padding: 0 5px;
    height: 28px;
    background: #f5f5f5;
    border-radius: 25px 25px 25px 25px;
  }

  .level-num {
    margin-top: 9px;
    justify-content: space-between;
    align-items: center;

    & > span:nth-of-type(1) {
      font-size: 16px;
      color: #bd90d9;
    }

    & > span:nth-of-type(2) {
      font-size: 12px;
      color: #848484;
    }
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
}
.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;
  display: flex;
  align-items: flex-start;
  .geren {
    flex: 1;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }
    .list {
      position: relative;
      width: 100%;
      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }
      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }
    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}
/deep/ .el-input--suffix .el-input__inner {
  border: none;
  color: #64b6a8;
}
/deep/.el-select .el-input .el-select__caret {
  color: #64b6a8;
}
/deep/ .el-progress-bar__outer {
  border: 3px solid #ebeef5 !important;
}
/deep/ .el-select {
  width: 100px;
}
.swiper-container {
  position: relative;
  width: 820px !important;
  height: 180px !important;
  margin: 0 auto;
}
.swiper-container1 {
  position: relative;
  width: 820px !important;
  height: 110px !important;
  margin-top: 0px;
  margin-bottom: 0px;
  margin: 0 auto 0px;
}
// }
.swiper-wrapper {
  display: flex;
  align-items: center;
}
.swiper-slide {
  box-sizing: border-box;
  padding: 14px 23px 21px 27px;
  -webkit-transition: transform 0.1s;
  -moz-transition: transform 0.1s;
  -ms-transition: transform 0.1s;
  -o-transition: transform 0.1s;
  -webkit-transform: scale(0.6, 0.3);
  //  border: 1px solid #999;
  height: 150px;
  width: 388px;
  transform: scale(0.7);
  background: #ffffff;
  box-shadow: 0px 3px 10px 1px rgba(173, 173, 173, 0.38);
  border-radius: 10px 10px 10px 10px;
}

.swiper-slide-prev,
.swiper-slide-next {
  .swiper-title {
    color: #e0e0e0 !important;
  }
  .dot {
    position: relative;
    top: 4px;
    margin: 0 0 20px 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

    .small-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #e0e0e0 !important;
    }
  }
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  position: relative !important;
  width: 388px !important;
  -webkit-transform: scale(1);
  transform: scale(1);
  height: 150px;
  .dot {
    top: 1px;
  }
}
.swiper2 {
  background-color: transparent !important;
  box-shadow: none;
}
.bookImg {
  width: 100px !important;
  height: 150px;
}

.bookName {
  font-size: 14px;
  width: 100%;
  display: none;
  margin-top: -55px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swiper-slide-active .bookName {
  display: block;
}
.swiper-slide-active .level-num::before {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translate(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent !important;
  border-right: 16px solid transparent !important;
  border-top: 12px solid #fff !important;
}
.swiper-item1 {
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 22px;
  color: #848484;

  .dot {
    position: relative;
    top: 4px;
    margin: 0 0 20px 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

    .small-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #e0e0e0;
    }
  }

  //   .dotStyle {
  //     top: 0px;
  //     width: 34px;
  //     height: 34px;

  //     .smallDotStyle {
  //       width: 22px;
  //       height: 22px;
  //       background-color: #dbc6e8;
  //     }
  //   }
}

.itemStyle {
  font-size: 26px;
  color: #a877c6;
}

.line {
  position: absolute;
  top: 264px;
  left: 62.4px;
  left: 62.4px;
  width: 820px;
  height: 9px;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.05);
}

.userInfo {
  position: relative;
  display: flex;
  align-items: center;
  width: 546px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #e8e8e8;

  .mingxi {
    position: absolute;
    right: -108px;
    background: #64b6a8;
    border-radius: 19px 19px 19px 19px;
    font-size: 20px;
    padding: 5px 25px;
    text-align: center;
    color: #ffffff;
  }
  .cur-left,
  .cur-right {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 14px 24px;

    .cur-title {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      margin-right: 33px;
    }
    .cur-lev {
      font-size: 26px;
      font-weight: 500;
      color: #64b6a8;
    }
  }
  .cur-right {
    border: none;
  }
}

.task-title {
  display: flex;
  align-items: center;
  margin: 40px 0 0 32px;
  .title-left {
    margin: 0 12px 0 0;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
  }
  .title-right {
    font-size: 18px;
    color: #999999;
  }
}

.task-list {
  margin: 0 264px;

  .task-li {
    align-items: center;
    padding: 30px 0 24px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #d6d6d6;
    justify-content: space-between;

    .task-left {
      align-items: center;
      img {
        width: 37px;
        height: 37px;
        margin: 0 14px 0 0;
      }

      .task-desc {
        .task-title {
          width: 220px;
          font-size: 16px;
          color: #333333;
          margin: 0 0 5px 0;
        }

        .task-dot {
          font-size: 14px;
          color: #a3aab0;
        }
      }
    }

    .task-right {
      flex-direction: column;
      align-items: center;

      .task-btn {
        padding: 7px 20px;
        font-size: 14px;
        color: #ffffff;
        background: #64b6a8;
        border-radius: 30px 30px 30px 30px;
      }

      .finish {
        background: #fff;
        border: 1px solid #a3aab0;
        color: #a3aab0;
      }
    }
  }
}

.more-task {
  width: 240px;
  padding-bottom: 45px;
  margin: 50px auto 0;
  font-size: 14px;
  text-align: center;
  color: #8fbab2;
}

.details {
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid #e0e0e0;
  margin: 22px 25px 63px;
  .det-close {
    text-align: right;
    margin: 0 15px 0 0;
    font-weight: 600;
    font-size: 26px;
  }
  .det-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 40px 0;
  }
  .choose-date {
    margin: 0 0 8px 80px;
  }

  .det-list {
    margin: 0 80px 50px;
    .det-month {
      .list-title {
        padding: 5px 20px;
        margin: 13px 0 8px 0;
        background: #64b6a8;
        justify-content: space-between;
        border-radius: 4px 4px 4px 4px;
        font-size: 22px;
        font-weight: 500;
        color: #ffffff;
      }
      .list-content {
        justify-content: space-between;
        padding: 12px 20px;
        font-size: 20px;
        font-weight: 600;
        color: #000000;
      }
    }
  }
}
.det-det::-webkit-scrollbar-track {
  // background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

.det-det::-webkit-scrollbar {
  -webkit-appearance: none;
  border-radius: 5px;
  // 滚动条的宽高
  width: 5px;
}

.det-det::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: #64b6a8;
  transition: color 0.2s ease;
}
.det-det {
  padding: 7px 0 0 11px;
  max-height: 250px;
  // height: 250px;
  font-weight: 400;
  overflow-y: auto;
}
.item-container {
  .dd-list {
    padding: 5px 15px;
    background: #f8f8f8;
    margin: 4px 14px 4px 0;
    .dd-left {
      .dd-title {
        font-size: 18px;
        color: #000000;
        margin: 0 0 2px 0;
      }
      .dd-time {
        font-size: 16px;
        color: #adadad;
      }
    }
    .dd-right {
      font-size: 18px;
      color: #000000;
    }
  }
}

.popupBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;

  // z-index: 10000;

  .popupit {
    width: 434px;
    // height: 217px;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #707070;

    .title {
      padding: 0 73px;
      margin-top: 18px;
      font-size: 26px;
      color: #000;
    }

    .confirmBtn {
      width: 100%;
      height: 70px;
      background-color: #64b6a8;
      text-align: center;
      line-height: 70px;
      border-radius: 0 0 10px 10px;
      margin-top: 48px;
      cursor: pointer;
    }
  }

  .btn {
    margin-top: 43px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;

    .cancel {
      width: 115px;
      height: 44px;
      border-radius: 37px;
      border: 1px solid #64b6a8;
      font-size: 21px;
      color: #64b6a8;
      text-align: center;
      line-height: 44px;
      margin-left: 87px;
      margin-right: 32px;
      cursor: pointer;
    }

    .affirm {
      width: 115px;
      height: 44px;
      background: #64b6a8;
      border-radius: 37px;
      text-align: center;
      line-height: 44px;
      cursor: pointer;
    }
  }
}

/deep/ table {
  border: 1px solid #ccc !important;
  border: 1px solid #ccc !important;
  border-collapse: collapse !important;
}

/deep/ table td,
/deep/ table th {
  border: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}

/deep/ table th {
  border: 1px solid #ccc;
  text-align: center;
  background-color: #64b6a8;
  color: #fff;
}

.close-repost {
  display: flex;
  justify-content: flex-end;
  span {
    cursor: pointer;
    padding: 10px 20px 0 0;
    color: #333;
    text-align: right;
    font-size: 26px;
    font-weight: 500;
  }
}

.content-right {
  position: relative;
  i {
    position: absolute;
    top: 4px;
    right: 70px;
  }
}

</style>
